<template>
    <div class="left-nav">
        <ul>
            <li>
                <router-link to="/">
                <i class="iconfont icon-redpacket" title="收银"></i>
                <div>收银</div>
                </router-link>
            </li>
            <li>
                <router-link to="/store">
                <i class="iconfont icon-shop" title="店铺"></i>
                <div>店铺</div>
                </router-link>
            </li>
            <li>
                <router-link to="/goods">
                <i class="iconfont icon-present" title="商品"></i>
                <div>商品</div>
                </router-link>
            </li>
            <li>
                <router-link to="/member">
                <i class="iconfont icon-crown" title="会员"></i>
                <div>会员</div>
                </router-link>
            </li>
            <li>
                <router-link to="/statistics">
                <i class="iconfont icon-barcode" title="统计"></i>
                <div>统计</div>
                </router-link>
            </li>
            <li>
                <router-link to="/setting">
                <i class="iconfont icon-settings" title="设置"></i>
                <div>设置</div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "LeftNav",
  mounted: function() {
    console.log(this.$route.name);
  }
};
</script>

<style>
.left-nav {
  color: #fff;
  background-color: #1d8ce0;
}
.iconfont {
  font-size: 1.5em;
}
.left-nav ul {
  padding: 0;
  margin: 0;
}
.left-nav li {
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #20a0ff;
  padding: 1em 0.5em;
}
a {
  text-decoration: none;
}
a:visited {
  color: #fff;
}
</style>
